var Book = Class.create({
	initialize: function (aWidth,aHeight,picArray,aPageL,aPageR,rotateArray)
	{
		this.myBook = document.getElementById("myBook");
		this.pWidth =  aWidth;
		this.pHeight =  aHeight;
		this.extArray  = picArray;
		this.ShadowPicL = aPageL;
		this.ShadowPicR = aPageR;
		this.Rotatetor = rotateArray;
		this.PageshadowL; 
		this.PageshadowR ; 

		
		this.isDrag = false;
		this.LeftBorder = 0;
		this.oElem;
		this.numPixels = 20; //number of pixels to slide per move
		
		this.DegRec = 45;
		
		this.leftStart=0;
		this.rightStart=1;
		
		this.pageBorderWidth = 1;
		this.pageBorderColor="#000000"; //border color
		this.pageBorderStyle="solid"; //border style eg. solid, dashed or dotted.
		
		
		this.pSpeed=20; //page speed, 20 is best for Opera browser. Less is faster

		this.showBinder=true; //change to false for no binder

		this.binderImage = "Pic/parchmentring3.gif"; //location of center binder
		this.BinderWidth = 20; //width of center binder image

		var tempPixelsToMove,tempSpeed;
		var hideDiv,revealDiv,revealHtmlDiv,hideHtmlDiv,hasPlayed=false;
		var myBinder;
		var isMoving=false;
		var isHidden=false;
		
		
		// Add for contain Genesis Object
		this.bookGenesisContainer = new Array(); 
	},
	
	Create:function()
	{
		if(!document.getElementById("myBook") ){return;}; 
		pWidth=myPageW+2; 
		pHeight=myPageH+2; 

		this.myBook.style.width=(pWidth*2)+'px';
		this.myBook.style.height=pHeight+'px';
		this.myBook.style.position="relative";
		this.myBook.style.zIndex="0";      

		for(var i = 0; i< extArray.length;i++)
		{
			var deg2radians = Math.PI * 2 / 360;
			var	deg = 30;
			var rad = deg * deg2radians;
			costheta = Math.cos(rad);
			sintheta = Math.sin(rad);
			sinminus = -sintheta;
			// Tag Book Page
			this.bookGenesisContainer[i] = new Array(); // Keep all Genesis for specific page 1
			this.bookGenesisContainer[i][0] = new Genesis(0,0);
			this.bookGenesisContainer[i][0].setSize(myPageW,myPageH);
			this.bookGenesisContainer[i][0].getDomObj().id                = "flipHtml"+i;
			this.bookGenesisContainer[i][0].getDomObj().style.top         = "0px";
			this.bookGenesisContainer[i][0].getDomObj().style.left 		  = "0px";
			this.bookGenesisContainer[i][0].getDomObj().style.borderWidth = "1px";
			this.bookGenesisContainer[i][0].getDomObj().style.borderColor = this.pageBorderColor;
			this.bookGenesisContainer[i][0].getDomObj().style.borderStyle = this.pageBorderStyle;
			this.bookGenesisContainer[i][0].getDomObj().style.background  = "#785165 url('"+extArray[i]+"') ";
			/*
			var ImgDiv = document.createElement('div');
				ImgDiv.setAttribute("id","flipHtml"+i);	
				ImgDiv.style.position="absolute";
				ImgDiv.style.width=myPageW+"px";
				ImgDiv.style.height=myPageH+"px";
				ImgDiv.style.top="0px";
				ImgDiv.style.left="0px";		
				ImgDiv.style.overflow="hidden";			
				ImgDiv.style.borderWidth="1px";
				ImgDiv.style.borderColor=this.pageBorderColor;
				ImgDiv.style.borderStyle=this.pageBorderStyle;
				ImgDiv.style.background="#785165 url('"+extArray[i]+"') ";
			*/
			
			var myDiv = document.createElement('div'); 
				myDiv.setAttribute("id","flipPage"+i);
				myDiv.style.position="absolute";
				myDiv.style.left=pWidth+this.LeftBorder+'px';
				myDiv.style.top=0+'px';
				myDiv.style.width=pWidth+"px";
				myDiv.style.height=pHeight+"px";			
				myDiv.style.overflow="hidden";
				myDiv.style.zIndex=extArray.length-i;
				if(i%2 == 0)
				{
				
					this.bookGenesisContainer[i][0].getDomObj().onmousedown = function(e){Book.dragBegin(e,true);};
					
				}
				else
				{
					
					this.bookGenesisContainer[i][0].getDomObj().onmousedown = function(e){Book.dragBegin(e,false);};
				}
			myDiv.appendChild(this.bookGenesisContainer[i][0].getDomObj());
			this.myBook.appendChild(myDiv);

			if(i%2 == 0 || i==extArray.length-1)
			{
			var Index = document.getElementById("myIndex");
			
			var newIndex  = document.createElement('A'); 
			newIndex.setAttribute("href","javascript:Book.autoFlip('"+i+"');"); 
			newIndex.innerHTML = "test"+i;
			
			Index.appendChild(newIndex);
			}
		}

		if(this.showBinder)
		{
			myBinder = document.createElement('div'); 	
			myBinder.style.width=this.BinderWidth+"px";
			myBinder.style.height=pHeight+'px';
			myBinder.style.position="absolute";
			myBinder.style.top="0px";
			myBinder.style.left=pWidth-(this.BinderWidth/2)+"px";
			myBinder.style.background="transparent url('"+this.binderImage+"') top left repeat-y";
			myBinder.style.zIndex="200";
			this.myBook.appendChild(myBinder);		
		}
		PageshadowL = document.createElement('div'); 	
		PageshadowL.style.width=this.BinderWidth+"px";
		PageshadowL.style.height=pHeight+'px';
		PageshadowL.style.position="absolute";
		PageshadowL.style.width=0+"px";
		PageshadowL.style.height=myPageH+"px";
		PageshadowL.style.top="0px";
		PageshadowL.style.left=0+'px';
		PageshadowL.style.background="transparent url('"+this.ShadowPicL+"') top left repeat-y";
		PageshadowL.style.zIndex="50";
		//Pageshadow.style.FILTER = " alpha(opacity=50)";
		PageshadowL.style.opacity = "0.5";
		this.myBook.appendChild(PageshadowL);
			
		PageshadowR = document.createElement('div'); 	
		PageshadowR.style.width=this.BinderWidth+"px";
		PageshadowR.style.height=pHeight+'px';
		PageshadowR.style.position="absolute";
		PageshadowR.style.width=0+"px";
		PageshadowR.style.height=myPageH+"px";
		PageshadowR.style.top="0px";
		PageshadowR.style.left=pWidth+'px';
		PageshadowR.style.background="transparent url('"+this.ShadowPicR+"') top left repeat-y";
		PageshadowR.style.zIndex="50";
		//Pageshadow.style.FILTER = " alpha(opacity=50)";
		PageshadowR.style.opacity = "0.5";
		this.myBook.appendChild(PageshadowR);	
	},

	autoFlip:function(topage)
	{	
		if(topage>$(this).leftStart) // Drag Right
		{
			var Round =  ( topage - $(this).leftStart)/2;
			
			Book.doAutoFlip(Round,true);
		}
		else
		{
			var Round =  ( $(this).leftStart - topage)/2;
			
			
			Book.doAutoFlip(Round,false);
			
		}
	},

	doAutoFlip:function (num,dir)
	{
		if(num==0){	window.clearTimeout();$(this).numPixels=tempPixelsToMove;return;};
		if(dir)
		{
			Book.gonext();
		}
		else
		{	
		
			Book.goprev();
		}
		num--;
		 window.setTimeout('Book.doAutoFlip('+num+','+dir+')',100);
	},

	gonext:function()
	{
		if($(this).isMoving)
		{return;};
		if(!document.getElementById("flipPage"+$(this).rightStart) )
		{return;}
		$(this).isMoving=true;
		hideDiv   = document.getElementById("flipPage"+$(this).leftStart);
		hideHtmlDiv	= document.getElementById("flipHtml"+$(this).leftStart);
		
		revealDiv = document.getElementById("flipPage"+$(this).rightStart);
		revealHtmlDiv = document.getElementById("flipHtml"+$(this).rightStart);
		
		revealDiv.style.width="0px";
		revealDiv.style.left=pWidth*2+'px';
		revealDiv.style.zIndex=99;
		Book.goright(pWidth*2,0);
	},

	goright:function(currLeft,currWidth)
	{
		if(currLeft <= this.numPixels*2)
		{
			window.clearTimeout();
			revealDiv.style.left=0+'px';
			revealDiv.style.width=pWidth+'px';
			revealDiv.style.zIndex=revealDiv.style.zIndex-99;
			
			hideHtmlDiv.style.left="";	
			hideHtmlDiv.style.right="0px";

			revealHtmlDiv.style.left="";	
			revealHtmlDiv.style.right="0px";

			
			PageshadowR.style.width= "0px";


			$(this).leftStart=$(this).leftStart+2;
			$(this).rightStart=$(this).rightStart+2;
			
			$(this).isHidden=false;	
					
			$(this).isMoving=false;
			if(this.showBinder)
			{
			myBinder.style.zIndex="100";
			};
			if( document.getElementById("flipSelect") )
			{ //update page select
				document.getElementById("flipSelect").selectedIndex=$(this).leftStart-1;
			}
			$(this).hasPlayed=false;
			$(this).isDrag = false;
			return;
		}	

		currLeft=currLeft-($(this).numPixels*2);//2 * width reveal
		currWidth=currWidth+$(this).numPixels;
		
		revealDiv.style.left=currLeft+'px';
		revealDiv.style.width=currWidth+'px';

		
		hideWidth = currLeft-pWidth;	
		PageshadowR.style.left=pWidth+'px';
		PageshadowR.style.zIndex= parseInt(hideDiv.style.zIndex)-1;
		PageshadowR.style.width=pWidth +"px";
		PageshadowR.style.opacity =parseInt(revealDiv.style.left)/1500 ;
		if(hideWidth>0)
		{
			hideDiv.style.width=hideWidth+'px';
		}
		else
		{
			if(!this.isHidden)
			{
				hideDiv.style.width=0+'px';
				this.isHidden=true;
			}
		}
		if(currLeft<(pWidth+this.BinderWidth+$(this).numPixels) && !$(this).hasPlayed)
		{
			if(this.showBinder){myBinder.style.zIndex="0";};
		
			hasPlayed=true;
		}
		 window.setTimeout('Book.goright('+currLeft+','+currWidth+')',$(this).pSpeed);
		

	},

	goprev :function(){
		if($(this).isMoving)
		{
			alert('Error1');
		return;
		}
		if(!document.getElementById("flipPage"+($(this).leftStart-2)) )
		{
			alert('Error2');
		return false;
		}
		isMoving=true;

		$(this).leftStart=$(this).leftStart-2;
		$(this).rightStart=$(this).rightStart-2;
		
		hideDiv = document.getElementById("flipPage"+$(this).rightStart);
		hideHtmlDiv	= document.getElementById("flipHtml"+$(this).rightStart);
		
		revealDiv = document.getElementById("flipPage"+$(this).leftStart);
		revealHtmlDiv = document.getElementById("flipHtml"+$(this).leftStart);	
		
		revealDiv.style.left="0px";	
		revealDiv.style.width="0px";

		hideDiv.style.left="";
		hideDiv.style.right=pWidth+"px";
		
		Book.goleft(0,0);
	},

	goleft:function(currLeft,currWidth)
		{
		
		if(currLeft >=(pWidth-($(this).numPixels*2))){
			window.clearTimeout();

			revealDiv.style.left=pWidth+"px";
			revealDiv.style.width=pWidth+"px";
			
			revealHtmlDiv.style.left="0px";	
			hideHtmlDiv.style.left="0px";	

			PageshadowL.style.width= "0px";

			$(this).isHidden=false;	
			$(this).isMoving=false;
			if(this.showBinder){myBinder.style.zIndex="100";};
			
			if( document.getElementById("flipSelect") ){ //update page select
				if($(this).leftStart-1>0){
					document.getElementById("flipSelect").selectedIndex=$(this).leftStart-1;
				}else{	
					document.getElementById("flipSelect").selectedIndex=$(this).leftStart;
				}
			}
			
			$(this).hasPlayed=false;
			$(this).isDrag = false;
			return;
		}
		
		currLeft=currLeft+$(this).numPixels;//1 * width reveal
		currWidth=currWidth+$(this).numPixels;
		
		revealDiv.style.width=currWidth+'px';	
		revealDiv.style.left=currLeft+'px';
		
		hideWidth = pWidth-currWidth;	
		
		
		PageshadowL.style.zIndex= parseInt(hideDiv.style.zIndex)+1; 
		PageshadowL.style.left = "0px";
		PageshadowL.style.width= pWidth +"px";
		PageshadowL.style.opacity =hideWidth/1500  ;
		
		if(hideWidth >0){
			hideDiv.style.width=hideWidth-$(this).numPixels+'px';
		}else{
			if(!isHidden){
				hideDiv.style.width=0+'px';
				isHidden=true;
			}
		}	
		
		if(currLeft>((pWidth/2)-$(this).numPixels) && !hasPlayed){
			if(this.showBinder){myBinder.style.zIndex="0";};
			
			hasPlayed=true;
		}
		 window.setTimeout('Book.goleft('+currLeft+','+currWidth+')',$(this).pSpeed);
	},

	toggleBinder:function (){
		this.showBinder = (this.showBinder != false ? false : true );
		if(this.showBinder){	myBinder.style.display="";}else{myBinder.style.display="none";}
	},

/////////////////////////////////////// THIS IS FOR DRAGGING FUNCTION//////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////////////


	dragBegin:function(e,dir)
	{
		if(!$(this).isDrag)
		{
			isDrag = true;
			if(dir) // DragRight
		    {
				$(this).oElem   = document.getElementById("flipPage"+$(this).leftStart);

				hideDiv   = document.getElementById("flipPage"+$(this).leftStart);
				hideHtmlDiv   = document.getElementById("flipHtml"+$(this).leftStart);
				revealDiv = document.getElementById("flipPage"+$(this).rightStart);
				revealHtmlDiv = document.getElementById("flipHtml"+$(this).rightStart);
				
				revealDiv.style.width="0px";
				revealDiv.style.left=pWidth*2+'px';
				revealDiv.style.zIndex=99;

				e = e ? e : window.event;
				$(this).oElem.mouseX = e.clientX;
				$(this).oElem.mouseY = e.clientY;
				
				document.onmousemove = function(e){Book.dragRight(e);};
				document.onmouseup = function(e){Book.dragRightEnd(e);};
				//document.onmouseup = function(e){dragEnd(e);};
			}
			else // DragLeft
			{
				this.leftStart=this.leftStart-2;
				this.rightStart=this.rightStart-2;
		
				hideDiv = document.getElementById("flipPage"+$(this).rightStart);
				hideHtmlDiv	= document.getElementById("flipHtml"+$(this).rightStart);
			
				revealDiv = document.getElementById("flipPage"+$(this).leftStart);
				revealHtmlDiv = document.getElementById("flipHtml"+$(this).leftStart);	

			
				revealDiv.style.left="0px";	
				revealDiv.style.width="0px";

				hideDiv.style.left="";
				hideDiv.style.right=pWidth+"px";
			
				$(this).oElem   = document.getElementById("flipPage"+$(this).rightStart);

				e = e ? e : window.event;
				$(this).oElem.mouseX = e.clientX;
				$(this).oElem.mouseY = e.clientY;

				document.onmousemove = function(e){Book.dragLeft(e);};
				document.onmouseup = function(e){Book.dragLeftEnd(e);};
				//document.onmouseup = function(e){dragEnd(e);};
			}
		}
	},

	dragLeft:function (e)
    {
		if(parseInt(revealDiv.style.left) >= pWidth -this.LeftBorder)
		{
			revealDiv.style.left=pWidth-this.LeftBorder+"px";
			revealDiv.style.width=pWidth+"px";
			revealHtmlDiv.style.left="0px";	
			hideHtmlDiv.style.left="0px";	
			hideDiv.style.width = "0px";
			PageshadowL.style.width="0px";      
			if(this.showBinder){myBinder.style.zIndex="100";}
			if(  document.getElementById("flipSelect") ){ //update page select
				if($(this).leftStart-1>0){
					document.getElementById("flipSelect").selectedIndex=$(this).leftStart-1;
				}else{	
					document.getElementById("flipSelect").selectedIndex=$(this).leftStart;
				}
			}
			document.onmousemove = null;
			document.onmouseup = null; 
			$(this).isDrag = false;
			return;
	    }	
		e = e ? e : window.event;
		if((e.clientX - $(this).oElem.mouseX)>0)
		{ 
			revealDiv.style.left = (1/2)*(e.clientX - $(this).oElem.mouseX)+this.LeftBorder   + 'px'; 
			revealDiv.style.width =  (1/2)*(e.clientX - $(this).oElem.mouseX) - this.LeftBorder  + 'px'; 
			if((pWidth - (e.clientX - $(this).oElem.mouseX)-this.LeftBorder)>0)
			{
				hideDiv.style.width =	pWidth - (e.clientX - $(this).oElem.mouseX)-this.LeftBorder  +'px';
			}
			PageshadowL.style.zIndex= parseInt(hideDiv.style.zIndex)+1; 
			PageshadowL.style.left = "0px";
			PageshadowL.style.width= pWidth +"px";
			PageshadowL.style.opacity =(pWidth - (e.clientX - $(this).oElem.mouseX)-this.LeftBorder)/1500  ;
				
			if(parseInt(revealDiv.style.left)<(pWidth+this.BinderWidth) )
			{
			if(this.showBinder){myBinder.style.zIndex="0";};
			
		  }
		}

		return false;
		
	},
	dragRight:function(e)
	{

		if(parseInt(revealDiv.style.left) <= this.LeftBorder )
		{

			revealDiv.style.left=this.LeftBorder+'px';
			revealDiv.style.width=pWidth+'px';
			revealDiv.style.zIndex=0;

			hideHtmlDiv.style.left="";	
			hideHtmlDiv.style.right=0+'px';

			revealHtmlDiv.style.left="";	
			revealHtmlDiv.style.right=0 + 'px';

			hideDiv.style.width = 0+'px';
			
			
			PageshadowR.style.width= "0px";
			this.leftStart=this.leftStart+2;
			this.rightStart=this.rightStart+2;
			
				if(this.showBinder)
				{
					myBinder.style.zIndex="100";
				}
				if(  document.getElementById("flipSelect") )
				{ 
					document.getElementById("flipSelect").selectedIndex=$(this).leftStart-1;
				}
				
				isDrag = false;
				document.onmousemove = null;
				document.onmouseup = null;
				return;
	    }	
		e = e ? e : window.event;

		if(e.clientX - $(this).oElem.mouseX<0)
		{

				
				revealDiv.style.left =(  pWidth*2 + (e.clientX - $(this).oElem.mouseX) ) + 'px'; 
				
				revealDiv.style.width =  Math.abs(e.clientX - $(this).oElem.mouseX)*(1/2) + 'px';
				
				
				var revealLeft = parseInt(revealDiv.style.left);
			
				if((revealLeft  - pWidth - this.LeftBorder)>0)
				{
				hideDiv.style.width =	revealLeft  - pWidth - this.LeftBorder+'px';
				}
				
				PageshadowR.style.left=pWidth+'px';
				PageshadowR.style.zIndex= parseInt(hideDiv.style.zIndex)-1;
				PageshadowR.style.width=pWidth +"px";
				PageshadowR.style.opacity =parseInt(revealDiv.style.left)/1500 ;
			
			

			  if(revealLeft<(pWidth+this.BinderWidth) )
			  {
				if(this.showBinder){myBinder.style.zIndex="0";};
				
			  }	
		}

		return false;
		
	},
	dragLeftEnd:function (e)
    {

				document.onmousemove = null;
				document.onmouseup = null;
				Book.goleft(parseInt(revealDiv.style.left), parseInt(revealDiv.style.width));
				PageshadowL.style.width= "0px";
			
				
				return false;
	
	},
	dragRightEnd:function (e)
    {
			document.onmousemove = null;
				document.onmouseup = null;
			Book.goright(parseInt(revealDiv.style.left), parseInt(revealDiv.style.width));
			PageshadowR.style.width= "0px";
			
				
				
				return false;

		
	},





	dragEnd:function (e)
    {
			
			
				document.onmousemove = null;
				document.onmouseup = null;
				
				return false;
	
	},
	
	DisableMouseEvent:function (e)
    {	
		alert('remove mouse event');
	
		for(var i = 0; i< extArray.length;i++)
		{
				SampleDiv   = document.getElementById("flipHtml"+i);
			if(i%2 == 0)
				{
				
					SampleDiv.onmousedown = null;
					
				}
				else
				{
					
					SampleDiv.onmousedown = null;
				}
			
		}
	},
	
	
	EnableMouseEvent:function (e)
    {	
	
		for(var i = 0; i< extArray.length;i++)
		{
				SampleDiv   = document.getElementById("flipHtml"+i);
			if(i%2 == 0)
				{
				
					SampleDiv.onmousedown = function(e){Book.dragBegin(e,true);};
					
				}
				else
				{
					
					SampleDiv.onmousedown = function(e){Book.dragBegin(e,false);};
				}
			
		}
	}
});